<template>
<!-- 注册会员 -->
  <div>
    <!--头部 -->
    <el-row>
      <div>
        <el-avatar src="static/img/9c6e546531d3ef875fedb1f564582bfd.jpeg" :size='90'></el-avatar>
        <span style="font-size:30px;position: absolute;top:10px">硅谷第一人民医院</span>
        <span style="font-size:20px;position: absolute;top:45px;left:90px">www.haoge.com</span>
      </div>
      <div style="position: absolute;top:40px;right:100px">
        <router-link to="/home">网站首页</router-link>
        <a href="https://www.kktijian.com/help/us_3.html">帮助中心</a>
      </div>
      <el-col :span="24" style="display:inline"><div style="height: 180px;display:inline"></div></el-col>
    </el-row>
    <hr>
    <!-- 中间部分 -->
    <div id="aboutMo">
      <p style="position: absolute;top:200px;left:40px">我已经注册,现在就<router-link to="/login">登录</router-link></p>
      <img id='image' src="static/img/5ef7bb6368f9279ada9acf94176ba8e2.jpeg">
      <el-row id="about">
        <el-col :span="8" :offset="16">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>会员注册</span>
            </div>
            <div class="text item">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @blur="blurphone">
                      <el-form-item label="手机号" prop="memPhone"
                      :rules="[
                      { required: true, message:'手机号不能为空' },
                      { pattern:/^1[3|5|7|8|9]\d{9}$/, message:'请输入正确的号码格式'}
                      ]">
                      <el-input v-model="ruleForm.memPhone" clearable size="small" type="text"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input v-model="ruleForm.newPwd" clearable size="small" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="memPassword">
                        <el-input v-model="ruleForm.memPassword" clearable size="small" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="ruleForm.yanzhengma" clearable size="small" type="text" placeholder="请输入验证码" @blur="bluryanzheng"></el-input>
                        <button class=" btn btn-primary" @click="daojishi" :disabled="yanzheng" v-show="canClick">发送验证码</button>
                        <button class=" btn btn-primary" @click="daojishi" :disabled="yanzheng" v-show="yanzheng">{{content}}</button>
                        <!--  v-if="canClick"  v-if="yanzheng"-->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" class="button">确定</el-button>
                        <el-button @click="resetForm('ruleForm')" class="button">重置</el-button>
                    </el-form-item>
                  </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 尾部 -->
      <div style="text-align: center;margin-top:90px;background-color: rgb(51, 51, 51);color:white;width:1530px;height:150px">
        <p>硅谷体检网，个性化体检定制与预约一站式服务平台。长沙市迈康信息技术有限公司 400-1000-920 触屏版</p>
          <p>Copyright(C)2015-2021深圳市迈康信息技术有限公司版权所有 工信部备案号：湘ICP备11060749号</p>
           <p>湘公网安备 44030302000844号 增值业务经营许可证：湘B2-20160228</p>
            <p>互联网药品信息服务资格证书：湘-经营性-2015-0024</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Logon',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.confirmPwd !== '') {
          this.$refs.ruleForm.validateField('confirmPwd')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      changePwdDialog: false, // 修改密码弹框
      ruleForm: {
        newPwd: '',
        memPhone: '',
        memPassword: '',
        yanzhengma: ''
      },
      content: '',
      canClick: true,
      wait: '60',
      yanzheng: false,
      rules: {
        newPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        memPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ]
      }
    }
  },
  methods: {
    // 账号唯一
    blurphone () {
      this.$axios.post(`/api/logincon/WeiyiAccount/${this.ruleForm.memPhone}`).then(result => {
        if (result.data.memPhone === this.ruleForm.memPhone) {
          this.$message.error('手机号已经被注册过')
        }
      })
    },
    // 注册账号
    submitForm () {
      this.$axios.get(`https://cloud-music-api-lyart.vercel.app/captcha/verify?phone=${this.ruleForm.memPhone}&captcha=${this.ruleForm.yanzhengma}`).then(results => {
        if (results.data.data) {
          this.$message({
            message: '验证成功！',
            type: 'success'
          })
          this.$axios.post(`/api/logincon/LogonMamber`, this.ruleForm).then(result => {
            this.$message({
              type: 'success',
              message: '注册成功'
            })
          })
        } else {
          this.$message.error('验证失败')
        }
      }).catch((er) => {
        this.$message.error('验证失败')
        this.msg2 = '验证码错误！'
      })
    },
    // 重置按钮,清空input的值
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 发送验证码
    daojishi () {
      if (this.ruleForm.memPhone === '') {
        this.$message.error('手机号码不能为空')
      } else {
        if (!this.canClick) return
        this.canClick = false
        this.yanzheng = true
        this.content = this.wait + '秒' // 这里解决60秒不见了的问题
        this.$axios.get(`https://cloud-music-api-lyart.vercel.app/captcha/sent?phone=${this.ruleForm.memPhone}`).then(result => {
          if (result.data.data) {
            this.$message({
              message: '验证码发送成功！',
              type: 'success'
            })
          } else {
            this.$message.error('发送失败！请稍后再试')
          }
        })
        let clock = window.setInterval(() => {
          this.wait--
          this.content = this.wait + '秒'
          if (this.wait < 0) { // 当倒计时小于0时清除定时器
            window.clearInterval(clock)
            this.content = '验证码'
            this.wait = 60
            this.yanzheng = false
            this.canClick = true
          }
        }, 1000)
      }
    },
    // 验证码的失焦事件
    bluryanzheng () {
      if (this.ruleForm.yanzhengma === '') {
        this.$message.error('验证码不能为空')
      }
    }
  }
}
</script>

<style>
 .text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix span{
  font-family: '楷体';
  font-size: 20px;
  color: red;
}
.box-card {
  width: 430px;
}
#image{
  position: absolute;
  top: 250px;
  right: 500px;
}
#about{
    position: absolute;
    top: 240px;
    right: 380px;
}
#aboutMo{
  width: 1530px;
  height: 510px;
  border: 1px solid darkgray;
  border-bottom: none;
  border-right: none;
  border-top: none;
}

.demo-ruleForm .el-input{width: 180px}
</style>
